<template>
	<view style="padding-bottom: 100rpx;">
		<view class="all">
			<view v-for="(item,index) in content">
				<view class="all3">
					<view class="all3_1">
						<image :src="item.avatar" style="width:100rpx ;height:100rpx;border-radius: 100%;" />
					</view>
					<view class="all3_2">
						<view class="all3_2_1">
							<text>{{item.nickname}}</text>
							<text>{{item.creat_time}}</text>
						</view>
						<u-input height='80'
						 v-model="item.content" disabled :auto-height='true' type="textarea" />
						
					<!-- 	<view class="all3_2_2">
							{{item.content}}
						</view> -->
					</view>
				</view>
				<view class="xian" v-if="index!=4"></view>
			</view>
			<view class="all2">
				<view>
					<u-tabs active-color='#131314' ref="tabs" :list="list" :current="current" @change="change" />
				</view>
			</view>
			<view v-for="(item,index) in data1.data">
				<view class="all3">
					<view class="all3_1">
						<image :src="item.avatar" style="width:100rpx ;height:100rpx;border-radius: 100%;" />
					</view>
					<view class="all3_2">
						<view class="all3_2_1">
							<text>{{item.nickname}}</text>
							<text>{{item.creat_time}}</text>
						</view>
						<view class="all3_2_2">
							{{item.content}}
						</view>
						<view class="all3_2_3">

							<view class="" @click="submit('点赞',item.id)">
								<image src="https://s4.ax1x.com/2022/01/18/7BF7kD.png"
									style="width: 32rpx;height:32rpx">
								</image>
								<text class='texrt'>{{item.support}}</text>
							</view>
							<!-- 	<view class="" @click="submit('评论',item.id)">

								<image src="@/static/img/fs2.png" style="width: 32rpx;height:32rpx">
								</image>
								<text class='texrt'>{{item.comment}}</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="xian" v-if="index!=4"></view>
			</view>
		</view>
		<view class="xain" v-if="type==1" />
		<view class="foot">
			<view class="foot_1">
				<image src="https://s4.ax1x.com/2022/01/18/7BAYxs.png" style="width: 40rpx;height: 40rpx;"></image>
				<view style="margin: 10rpx;width: 90%;">
					<input confirm-type='search' @confirm="search" v-model="value" placeholder="写留言，留下你的感悟" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import minBadge from '@/components/min-badge/min-badge'
	export default {
		props: ['type', 'data'],
		components: {
			minBadge
		},
		data() {
			return {
				value: '',
				pid: '',
				data1: {},

				current: 0,
				form: {
					type: 1,
					page: 1
				},
				content: [],
			}
		},
		computed: {
			list() {
				let a = [{
					name: this.current == 0 ? '默认' + '(' + this.data1.total + ')' : "默认"
				}, {
					name: this.current == 1 ? '最新' + '(' + this.data1.total + ')' : "最新"
				}]
				return a

			}
		},
		onShow() {
			this.getinfo()
		},
		mounted() {},
		onLoad(a) {
			this.content.push(JSON.parse(a.content))
			let form = JSON.parse(a.form)
			this.form.comment_id = form.pid
			this.form.cur_id = form.cur_id
		},
		methods: {
			search(item) {
				this.$api('broadcast/commentSave', {
					cur_id: this.form.cur_id,
					content: this.value,
					pid: this.form.comment_id
				}).then(res => {
					this.$toast(res.msg, 1)
					this.getinfo()
				})
			},

			getinfo() {
				this.$api('broadcast/commentList', this.form).then(res => {
					this.data1 = res.data
				})
			},
			submit(a, b, c) {
				if (a == '点赞') {
					this.$api('broadcast/support', {
						cur_id: this.form.cur_id,
						review_id: b
					}).then(res => {
						if (res.code == 1) {
							this.$toast(res.msg, 1)
							this.getinfo()
						}
					})
				} else {
					// uni.navigateTo({
					// 	url: `../jxpl/jxpl?data=${b}&content=${JSON.stringify(c)}`
					// })
				}
			},
			change(index) {
				this.$emit('onchange2', index + 1)
				this.current = index;
				this.form.type = index + 1
				this.getinfo()
			}
		}
	}
</script>

<style lang="scss">
	.xian {
		height: 1rpx;
		width: 100%;
		background-color: #E3E3E3;
		margin: 20rpx 0 20rpx 0;
	}

	.texrt {
		font-size: 24rpx;
		font-family: HarmonyOS Sans;
		font-weight: 400;
		color: #131314;
		margin-left: 10rpx;
		opacity: 1;
	}

	.foot {
		padding: 10rpx 0 10rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 10rpx;
		width: 100%;

		.foot_1 {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			width: 90%;
			height: 68rpx;
			background: #F5F5F5;
			border-radius: 50rpx
		}
	}

	.xain {
		height: 1rpx;
		border: 1rpx solid #E3E3E3;
		opacity: 1;
		margin-top: 20rpx;
	}

	.cell {
		margin: 22rpx;
	}

	.test1 {
		width: 44rpx;
		height: 44rpx;
		background-image: url(https://s4.ax1x.com/2022/01/18/7BF7kD.png);
		background-size: 100% 100%;
		background-repeat: no-repeat
	}

	.test {
		width: 44rpx;
		height: 44rpx;
		background-image: url(https://s4.ax1x.com/2022/01/18/7Bi0aD.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.badge {
		position: absolute;
	}

	.all3 {
		display: flex;

		.all3_2 {
			padding-top: 40rpx;
			padding-left: 15rpx;

			.all3_2_3 {
				.all3_2_3_1 {
					width: 44rpx;
					height: 44rpx;
					background-size: 100% 100%;
					position: relative;
				}

				float: right;
				display: flex;

				view:nth-of-type(1) {
					margin-right: 20rpx;
				}

			}

			.all3_2_2 {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40rpx;
				color: #131314;
				opacity: 1;
			}

			.all3_2_1 {
				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #91969A;
					opacity: 1;
				}

				width: 100%;
				display: flex;

				justify-content: space-between;
			}

			width: 100%;
		}
	}



	.all {
		.all2 {
			margin: 0 0 20rpx 0;
		}

		.all_text {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
		}

		padding: 0 20rpx 0 20rpx;
	}
</style>
